<template>

  <div class="container">

    <div class="search-container">
      <div class="search">
        <input class="search-input" type="search" v-model="message" placeholder="请输入" v-on:input="inputChange">
        <button class="search-button">
          <img class="search-icon" src="@/assets/search.png" alt="">
        </button>
      </div>
    </div>

    <div class="list-container" v-show="isShowSearchList">
      <div class="dropdown">
        <ul class="dropdown-list">
          <li class="dropdown-cell" v-for="item in searchList" :key="item.id">{{item.name}}</li>
        </ul>
      </div>
    </div>

    <div class="other-container" @click.stop="parentClickValue">

      <!-- <ul >
        <li  v-for="item in evenNumbers" >{{item}}</li> 
      </ul> -->
      <!-- <button @click="clickValue">{{value}}</button> -->
    </div>
    <!-- <div class="father">
          父亲
          <div class="son1">
            儿子1
          </div>
          <div class="son2">
            儿子2
          </div>

          <div class="son3">
            儿子3
          </div>
      </div>
      <div style="background-color: aquamarine;width: 100px; height: 200px;"></div> -->
    <!-- </div> -->

    <div>
      <button @click="getNetInfo">获取</button>
      <div>

      </div>
    </div>

  </div>
</template>

<script>

  import axios from 'axios'

  export default {
    data() {
      return {
        searchList: [],
        isShowSearchList: false,
        message: '',
        numbers: [1, 2, 3, 4, 5, 6, 7, 8],
        value: 0,
        that: this,
        son2: '儿子2'
      }
    },
    created() {
      console.log('created...');
      var item = { name: '中国', id: '111' }
      this.searchList.push(item);
      var item2 = { name: '美国', id: '222' }
      this.searchList.push(item2);
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter(function (number) {
          console.log(number)
          return number % 2 === 0
        })
      }
    },
    methods: {
      inputChange(e) {
        this.isShowSearchList = this.message.length > 0 ? true : false
      },
      clickValue() {
        this.value++;
        console.log('clickValue', '')
      },
      parentClickValue() {
        this.value++;
        console.log('parentClickValue', '')
      },
      getNetInfo(){
         axios.get('register',{
           params:{
             userName:'张三',
             password: 123456
           }
         }).then(function(res){
          console.log(res);
         }).catch(function(error){
          console.log(error);
         });
      }
    }
  }
</script>

<style scoped>
  .container {
    /* font-size: 0px; */
  }

  .father {
    margin: 10px 10px;
    background-color: aliceblue;
    width: 300px;
    height: 200px;
    border: 2px solid red;


  }

  .father .son1 {
    width: 200px;
    height: 50px;
    background-color: green;
    /* position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0; */
  }

  .son2 {
    width: 100px;
    height: 50px;
    background-color: blue;
    color: #ff0000;

  }

  .son3 {
    width: 150px;
    height: 60px;
    background-color: yellow;
  }

  .search-container {
    background-color: aquamarine;
  }

  .search {
    margin-left: 50px;
    margin-top: 20px;
    background: rgb(207, 224, 199);
    font-size: 0px;
    width: 350px;
    background-color: #4e4a4a;
  }

  .search-input {
    width: 300px;
    height: 40px;
    border: 2px solid #ff0000;
    padding: 0px;
    border-right: 0px;
    vertical-align: middle;
  }

  .search-input:focus {
    outline: none;
    border: 2px solid #ff0000;
    border-right: 0px;
  }

  .search-button {
    width: 50px;
    height: 40px;
    background: rgb(202, 14, 14);
    border: 0px;
    vertical-align: middle;
  }

  .search-button:focus {
    outline: none;
  }

  .search-icon {
    width: 30px;
    height: 30px;
    margin: 0px;
  }

  .list-container {
    background-color: #5c5555;
    position: absolute;
  }

  .dropdown {
    margin-top: 0px;
    margin-left: 50px;
    width: 348px;
    background: rgb(211, 204, 204);

  }

  .dropdown-list {
    /* background-color: bisque;
    list-style: none; 
    margin-top: 0px;
    padding: 0px; */

  }

  .dropdown-cell {
    background-color: aquamarine;
    font-size: 16px;
    /* margin: 10px;  */
  }

  .other-container {
    font-size: 16px;
  }
</style>